<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>

<div class="page">
    <%--<div class="pageHeader">--%>
    <%--<form id="pagerForm" onsubmit="return navTabSearch(this);" action="${ctx}/foodType/food-type.action"--%>
    <%--method="post">--%>
    <%--<input type="hidden" name="page.pageNo" id="pageNum" value="${page.pageNo}"/>--%>
    <%--<input type="hidden" name="page.orderBy" id="orderField" value="${page.orderBy}"/>--%>
    <%--<input type="hidden" name="page.order" id="order" value="${page.order}"/>--%>

    <%--<div class="searchBar">--%>


    <%--</div>--%>
    <%--</form>--%>
    <%--</div>--%>
    <div class="pageContent">
        <%--<div class="panelBar">--%>
        <%--<ul class="toolBar">--%>
        <%--<li><a class="toolBar-btn" href="${ctx}/foodType/food-type!input.action" target="dialog" width="600"--%>
        <%--height="400" rel="w_foodType">添加</a></li>--%>
        <%--<li><a class="toolBar-btn2" href="${ctx}/foodType/food-type!delete.action?id={sid_user}"--%>
        <%--target="ajaxTodo"--%>
        <%--title="确定要删除吗？" warn="请选择一条记录">删除</a></li>--%>
        <%--<li><a class="toolBar-btn" href="${ctx}/foodType/food-type!input.action?id={sid_user}" target="dialog"--%>
        <%--width="600" height="400"--%>
        <%--warn="请选择一条记录" rel="w_foodType">查看/修改</a></li>--%>
        <%--</ul>--%>
        <%--</div>--%>
        <div layouth="111">
            <%--<table class="list" width="100%">--%>
            <%--<thead>--%>
            <%--<tr>--%>
            <%--<th width="20%">名称</th>--%>
            <%--<th width="20%">级别</th>--%>
            <%--<th width="20%">父级</th>--%>
            <%--</tr>--%>
            <%--</thead>--%>
            <%--<tbody>--%>
            <%--<s:iterator value="page.result">--%>
            <%--<tr target="sid_user" rel="${id}">--%>
            <%--<td>${name}&nbsp;</td>--%>
            <%--<td>${level}级&nbsp;</td>--%>
            <%--<td>${pname}&nbsp;</td>--%>
            <%--</tr>--%>
            <%--</s:iterator>--%>
            <%--</tbody>--%>
            <%--</table>--%>

            <%--<div style=" float:left; margin:100px; overflow:auto; width:700px; height:200px;">--%>
            <%--<ul class="tree">--%>

            <ul id="tree" class="ztree" style="padding: 100px 100px"></ul>

            <li>
                <button id="submit">提交</button>
            </li>


            <li>
                <a id="addParent" href="#" title="增加菜品分类" onclick="return false;">增加菜品分类</a>
                <a id="addLeaf" href="#" title="增加子类菜品分类" onclick="return false;">增加子类菜品分类</a>
                <a id="edit" href="#" title="编辑分类名称" onclick="return false;">编辑分类名称</a>
                <a id="remove" href="#" title="删除菜品分类" onclick="return false;">删除菜品分类</a>
            </li>


            <script>

                var zTreeObj;
                // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
                var setting = {
                    view: {
                        selectedMulti: false
                    },
                    edit: {
                        enable: true,
                        showRemoveBtn: false,
                        showRenameBtn: false
                    },
                    data: {
                        keep: {
                            parent: true,
                            leaf: true
                        },
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        beforeDrag: beforeDrag,
                        beforeRemove: beforeRemove,
                        beforeRename: beforeRename,
                        onRemove: onRemove
                    }
                };

                // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
                var zNodes = [];

                var url = "${ctx}/foodType/food-type!trees.action";
                $.post(url, function (result) {
                    zNodes = JSON.parse(result);

                    $(document).ready(function () {
                        zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
                        $("#addParent").bind("click", {isParent: true}, add);
                        $("#addLeaf").bind("click", {isParent: false}, add);
                        $("#edit").bind("click", edit);
                        $("#remove").bind("click", remove);
                        $("#submit").bind("click", submit);
                    });
                });


                var log, className = "dark";
                function beforeDrag(treeId, treeNodes) {
                    return false;
                }
                function beforeRemove(treeId, treeNode) {
                    className = (className === "dark" ? "" : "dark");
                    showLog("[ " + getTime() + " beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
                    return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
                }
                function onRemove(e, treeId, treeNode) {
                    showLog("[ " + getTime() + " onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
                }
                function beforeRename(treeId, treeNode, newName) {
                    if (newName.length == 0) {
                        alert("节点名称不能为空.");
                        var zTree = $.fn.zTree.getZTreeObj("tree");
                        setTimeout(function () {
                            zTree.editName(treeNode)
                        }, 10);
                        return false;
                    }
                    return true;
                }
                function showLog(str) {
                    if (!log) log = $("#log");
                    log.append("<li class='" + className + "'>" + str + "</li>");
                    if (log.children("li").length > 8) {
                        log.get(0).removeChild(log.children("li")[0]);
                    }
                }
                function getTime() {
                    var now = new Date(),
                        h = now.getHours(),
                        m = now.getMinutes(),
                        s = now.getSeconds(),
                        ms = now.getMilliseconds();
                    return (h + ":" + m + ":" + s + " " + ms);
                }

                var newCount = 1;
                function add(e) {
                    var zTree = $.fn.zTree.getZTreeObj("tree"),
                        isParent = e.data.isParent,
                        nodes = zTree.getSelectedNodes(),
                        treeNode = nodes[0];

                    alert(newCount)

                    if (newCount > 3) {
                        alert("最对只能添加三级分类");
                        return
                    }

                    if (treeNode) {
                        treeNode = zTree.addNodes(treeNode, {
                            id: null,
                            pId: treeNode.id,
                            isParent: isParent,
                            name: "new node" + (newCount++)
                        });
                    } else {
                        treeNode = zTree.addNodes(null, {
                            id: null,
                            pId: 0,
                            isParent: isParent,
                            name: "new node" + (newCount++)
                        });
                    }
                    if (treeNode) {
                        zTree.editName(treeNode[0]);
                    } else {
                        alert("叶子节点被锁定，无法增加子节点");
                    }



                };


                function edit() {
                    var zTree = $.fn.zTree.getZTreeObj("tree"),
                        nodes = zTree.getSelectedNodes(),
                        treeNode = nodes[0];
                    if (nodes.length == 0) {
                        alert("请先选择一个节点");
                        return;
                    }
                    zTree.editName(treeNode);
                };
                function remove(e) {
                    var zTree = $.fn.zTree.getZTreeObj("tree"),
                        nodes = zTree.getSelectedNodes(),
                        treeNode = nodes[0];
                    if (nodes.length == 0) {
                        alert("请先选择一个节点");
                        return;
                    }
                    if (treeNode.orderRefer == true) {
                        alert("改类型下面已经有菜品,不能删除");
                        return;
                    }

                    var callbackFlag = $("#callbackTrigger").attr("checked");
                    zTree.removeNode(treeNode, callbackFlag);
                };


                function submit() {
                    var zTree = $.fn.zTree.getZTreeObj("tree")
                    var nodes = zTree.getNodes();

                    var url = "${ctx}/foodType/food-type!treeSubmit.action";
                    $.post(url, {
                        data: JSON.stringify(nodes)
                    }, function (result) {
                        alert(result)
                    })


                }


            </script>

            <%--<div class="panelBar">--%>
            <%--<div class="pages">--%>
            <%--<span>共${page.totalCount}条,共${page.totalPages}页</span>--%>
            <%--</div>--%>

            <%--<div class="pagination" targetType="navTab" totalCount="${page.totalCount}" numPerPage="${page.pageSize}"--%>
            <%--pageNumShown="10" currentPage="${page.pageNo}"></div>--%>

            <%--</div>--%>

        </div>
    </div>
</div>